<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>师资介绍</title>
    <link rel="stylesheet"  href="${ctx}/css/style2L.css" />
    <script src="${ctx}/js/jquery.min.js"></script>
    <script src="${ctx}/js/kidJS/kidLogin.js"></script>
    <!-- <script src="${ctx}/js/style.js"></script> -->
</head>
<body>
<!-- 头部 -->
<header>
    <!-- 顶部 -->
    <div id="top" class="clear">
        <p>
            <a href="#">마이페이지</a>
            <a href="#">도와드릴까요?</a>
            <a href="#">학부모마당</a>
            <a href="#">管理员登陆入口</a>
        </p>
    </div>
    <!-- 顶部 -->
    <!-- 导航 -->
     <nav class="clear">
        <ul class="nav">
            <li class="item">
                <a href="${ctx}/main.html">首页</a>
            </li>
            <li class="item">
                <a href="">介绍</a>
                <div class="submenue">
                    <ul class="clear">
                        <li><a href="#">学校介绍</a></li>
                        <li><a href="${ctx}/visitor/sub4">师资介绍</a></li>
                        <li><a href="${ctx}/visitor/sub1">课程介绍</a></li>
                    </ul>
                </div>
            </li>
            <li class="item">
                <a href="${ctx}/visitor/sub2">优秀作品展示</a>
            </li>
            <li class="item">
                <a href="${ctx}/visitor/sub3">招生简章</a>
            </li>
            <li class="item"  style="display:none" id="hidLi">
                <a href="${ctx}/student/sub6">个人信息</a>
            </li>
               <li class="item"  style="display:none" id="hidLi2">
                <a href="${ctx}/student/sub9">我的订单</a>
            </li>
        </ul>
    </nav>
    <input type="hidden" value="${load}"  id="hiddenLoad">
    <!-- 导航 -->
    <!-- 登录 -->
    <section id="login">
        <div class="content clear">
            <h3>登&nbsp录</h3>
            <div class="usr">
                <label>用户名</label>
                <input type="text" value="" />
            </div>
            <div class="pwd">
                <label>密码</label>
                <input type="password" value="" />
            </div>
        </div>
        <div class="bottom">
            <a href="#">登录</a>
            <a href="#">注册</a>
        </div>
    </section>
    <!-- 登录 -->
</header>
<!-- 头部 -->

<!-- 主体 -->
<div>
    <article id="sub1" class="clear">
    <!-- 侧边栏 -->
    <aside id="t_intro">
        <div class="icon">
            <div class="hoop">
                <p class="hoop_t">课程大类</p>
                <div class="nav" id="nav">
                    <ul>
                        <li><a id="paint" href="javascript:void(0);" onclick="toPaint()" class="active">绘画</a><span class="line"></span></li>
                        <li><a id="handwriting" href="javascript:void(0);" onclick="toHandwriting()">书法</a><span class="line"></span></li>
                        <li><a id="instruction" href="javascript:void(0);" onclick="toInstruction()">乐器</a><span class="line"></span></li>
                        <li><a id="dance" href="javascript:void(0);" onclick="toDance()">舞蹈</a></li>
                    </ul>
                </div>
            </div>

            <div class="hoop1">
                <span class="line2"></span>
                    <div class="notice">
                        <p class="notice_t">优秀作品展示</p>
                        <div class="clear pos">
                            <p class="notice_c">
                                教师人格魅力和实力的较量
                            </p>
                            <p class="circle"><a href="#sub2">GO</a></p>
                        </div>
                        <p class="notice_t">招生简章</p>
                        <div class="clear pos">
                            <p class="notice_c">
                                小黄莺艺术学校招生指南
                            </p>
                            <p class="circle"><a href="#sub4">GO</a></p>
                        </div>
                    </div>
            </div>
        </div>
    </aside>
    <!-- 侧边栏 -->
    <!-- 主体 -->
    <section class="main">
        <div class="main_top"></div>

        <div class="title_log">
            <p class="title">课程</p>
            <p class="subtitle">小黄莺艺术学校现有课程分类</p>
        </div>

        <div class="step">
        	<div class="cls" id="allcls">
        	</div>
        </div>

        <div class="chapter">
            <div class="c1">
                <p class="t">课程介绍</p>
                <p class="chapter1" >
                    <p class="title1">Course Introduction</p><br>
                    <p class="content" id="c_info">
                        <!-- 계산력 반복훈련 및 개념과 원리히해, 구구단 19단까지 기본다지기와<br>
                        급수제를 통한 수학실력 집중향상과<br>
                        심화문제로 창의력과 사고력을 증진시킨다. -->
                    </p>
                </p>
            </div>
            <div class="c2">
                <p class="t">学生要求</p>
                <p class="chapter2">
                    <p class="title2">Requirements of Students</p><br>
                    <p class="content" id="c_req">
                        <!-- 계산력 반복훈련 및 개념과 원리히해, 구구단 19단까지 기본다지기와<br>
                        급수제를 통한 수학실력 집중향상과<br>
                        심화문제로 창의력과 사고력을 증진시킨다. -->
                    </p>
                </p>
            </div>
            <div class="c3">
                <p class="t">费用</p>
                <p class="chapter3">
                    <p class="title3">Course Fees</p><br>
                    <p class="content" id="c_cost">
                        <!--계산력 반복훈련 및 개념과 원리히해, 구구단 19단까지 기본다지기와<br>
                        급수제를 통한 수학실력 집중향상과<br>
                        심화문제로 창의력과 사고력을 증진시킨다.  -->
                    </p>
                </p>
            </div>
        </div>

        <div class="tip">
            <div class="tip_c" id="c_partner">
               	 
            </div>
        </div>
        <div class="bottom">
            <a href="#">招生简章</a>
        </div>
    </section>
    <!-- 主体 -->
</article>
</div>
<!-- 主体 -->

<!-- 尾部 -->
<footer>
    <div class="f_content clear">
        <p class="blogroll">
            <a href="#">회사소개</a>
            <a href="#">개인정보취급방침</a>
            <a href="#">이용안내</a>
        </p>
        <div class="search">
            <input type="text" value="family site" />
            <a href="#"></a>
        </div>
        <div class="copyRight">
            <p>서울시 강동구 성내동 5x8-8번지 20x호 I  TEL: 02-47x-45x2  FAX: 02-x78-4x83</p>
            <span>copyright(c) 2010 company co.,ltd. all rights reserved</span>
        </div>
    </div>
</footer>
<!-- 尾部 -->
<script>
 var type=$("#hiddenLoad").val();
function navChangeinite()
{
	  if(type=="yes")		
		     { 
		        document.getElementById("hidLi").style.display='block';
		        document.getElementById("hidLi2").style.display='block';
		     }
}
navChangeinite();

var sort = "绘画";

$(function(){
	getClass();
});

function getClass(){
	$.ajax({
	url: 'classIntro/getClass',
		type: 'post',
		dataType : 'json',
		data : {
			"sort" : sort,
		},
		error : function() {
			alert("操作错误！");
		},
		success : function(responseResult) {
			$("#allcls").empty();
			var content = '';
			$(responseResult.kClassList).each(
				function(i) {
					content += "<a href='javascript:void(0);' onclick=\"ClsInfo('" + this.info + "','" + this.req + "','" + this.cost + "','" + this.partner + "')\">" + this.name + "</a> ";
				});
			$("#allcls").append(content);
		}
	}); 
};

function empty(){
	$("#c_info").empty();
	$("#c_req").empty();
	$("#c_cost").empty();
	$("#c_partner").empty();
}

function ClsInfo(info,req,cost,partner){
	empty();
	$("#c_info").append(info);
	$("#c_req").append(req);
	$("#c_cost").append("每星期一节，一节"+cost+"元");
	$("#c_partner").append("合作方： "+partner);
};

function toClick(id) {
	empty();
	var liAry=document.getElementById("nav").getElementsByTagName("a");
    for(var i=0;i<liAry.length;i++){
        liAry[i].removeAttribute("class");
    }
    document.getElementById(id).setAttribute("class","active");
    document.documentElement.scrollTop = document.body.scrollTop =150;
};

function toPaint(){
	toClick("paint");
	sort = "绘画";
	getClass();
};

function toHandwriting(){
	toClick("handwriting");
	sort = "书法";
	getClass();
};

function toInstruction(){
	toClick("instruction");
	sort = "乐器";
	getClass();
};

function toDance(){
	toClick("dance");
	sort = "舞蹈";
	getClass();
};

$(window).load(function (){
    var oDiv = document.getElementById("t_intro"), H = 0, Y = oDiv;
    while (Y) {
        H += Y.offsetTop; //Y距离上方或上层控件的位置
        Y = Y.offsetParent; //返回最近的祖先定位元素
    }
    window.onscroll = function()
    {
        var s = document.body.scrollTop || document.documentElement.scrollTop; //返回匹配元素的滚动条的垂直位置
        if(s>H) {
            oDiv.style = "position:fixed;top:0;";
        } else {
            oDiv.style = "";
        }
    };
});
</script>
</body>
</html>